<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: 'Microsoft Yahei';
            color: #fff;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        @font-face {
            font-style: normal;
            font-family: DS-Digital;
            src: url("css/fonts/DS-DIGI.woff") format('woff');
        }
        @keyframes shanshuoA {
	        0% {
                box-shadow: 0 0 0px 0px rgba(255,0,0,0) inset;
	        }
            50%{
                box-shadow: 0 0 400px 200px rgba(255,0,0,.6) inset;
            }
	        100% {
		        box-shadow: 0 0 0px 0px rgba(255,0,0,0) inset;
	        }
        }       
        @keyframes shanshuoD {
	        0% {
                box-shadow: 0 0 0px 0px rgba(255,255,0,0) inset;
	        }
            50%{
                box-shadow: 0 0 400px 200px rgba(255,255,0,.6)  inset;
            }
	        100% {
                box-shadow: 0 0 0px 0px rgba(255,255,0,0) inset;
	        } 
        }  
        .time {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-image: url('img/background.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative
        }
        .time.alarm{
            animation: shanshuoD 2s infinite;
	        -webkit-animation: shanshuoD 2s infinite;
            /* background-image: url('img/background_alarm.gif'); */
        }
        .time.danger{
            animation: shanshuoA 2s infinite;
	        -webkit-animation: shanshuoA 2s infinite;
            /* background-image: url('img/background_danger.gif'); */
        }
        .time .title {
            width: 100%;
            font-family: 'Microsoft Yahei';
            line-height: 100px;
            font-size: 145px;
            margin-top: 200px;
            text-align: center;
            color: #BEEAFF;
        }

        .timeContainer {
            width: 90%;
            height: 360px;
            margin: 0 auto;
            margin-top: 100px;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
        }
        
        /* 数字坑的样式 */

        .timeContainer .content {
            width: 516px;
            height: 100%;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }

        .timeContainer .keng {
            width: 258px;
            height: 100%;
            background-image: url('img/keng.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-family: 'DS-Digital';
            font-size: 300px;
            text-align: center;
            line-height: 360px;
            color: #FFF13B;
            text-shadow: 0 0 30px #FFF13B
        }

        /*  点的样式 */

        .timeContainer .dots {
            width: 15px;
            height: 50px;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }

        .timeContainer .dot {
            width: 15px;
            height: 15px;
            background-color: #FFF13B;
        }

        .actions {
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
            -webkit-justify-content: space-around;
            width: 34%;
            height: 94px;
            margin-top: 180px;
            margin-left: 26px;
        }

        /* 按钮样式 */
        .time .el-button {
            font-size: 32px;
            padding:0;
            width: 150px;
            height: 70px;
            line-height: 70px;
            background-image: url('img/button.png');
            background-size: 100% 100%;
            background-color: transparent;
            color: #fff;
            border: none;
        }
        .el-button.is-plain:focus,
        .el-button.is-plain:hover {
            background-image: url('img/button.png');
            background-color: #0080c0;
            background-size: 100% 100%;
            border: none;
            color: #fff;
        }

        .logo {
            width: 380px;
            height: 108px;
            position: absolute;
            left: 16px;
            top: 16px;
            line-height: 108px;
            font-size: 60px;
            background-image: url('img/logo.png');
            background-size: 93px 108px;
            padding-left: 100px;
            background-position: left top;
            background-repeat: no-repeat;
        }

        .time .el-dialog {
            height: 600px;
            width: 1000px;
            margin: 0px auto;
            background-color: rgba(4, 18, 60, .6);
            border: 4px solid #188aff;
            border-radius: 20px;
            border-left: none;
            border-right: none;
            padding: 20px;
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -500px;
            z-index: 3000000;
        }
        .el-dialog__footer .el-button{
            width: 122.5px;
            height: 47px;
            line-height: 47px;
            font-size: 20px;
        }
        .time .el-dialog__header {
            padding: 0;
            height:40px;
            line-height:40px;
            text-align: center;
            
        }
        .time .el-dialog__header .el-dialog__title{
            color:#BEEAFF;
            font-size: 32px;
        }
        .time .el-dialog__header .el-dialog__headerbtn{
            font-size: 30px;
        }
        .time .el-dialog__footer{
            position:absolute;
            right:0;
            bottom:0
        }
        /* 时间设置 */
        .timeset{
            width:100%;
            height:80px;
            margin:10px 0;
            line-height: 100px;
            text-align: left;
            font-size: 30px;
            padding-left: 120px
        }
        .timeset .el-input{
            width:120px;
            height:60px
        } 
        .timeset .el-input input{
            background-color: #081347;
            height:100%;
            padding:0;
            font-size: 32px;
            color:#fff;
            text-align: center;
            border:1px solid #00ffff
        } 
        .timeset .el-radio__label {
            font-size: 32px;
            padding-left: 10px;
        }
        .timeset .el-radio__inner{
            width:24px;
            height:24px;
        }
        .timeset .el-radio, .el-radio__inner, .el-radio__input{
            bottom:3px;
        }
        /* 声音 */
        .time .soundContainer{
            position:absolute;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="time" v-bind:class="{danger:isDanger,alarm:isAlarm}" id="time">
        <div class="title">{{title}}</div>
        <!-- 时间容器 -->
        <div class="timeContainer">
            <div class="content">
                <div class="keng">{{timeobj.h_one}}</div>
                <div class="keng">{{timeobj.h_two}}</div>
            </div>
            <!-- 点 -->
            <div class="dots">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="content">
                <div class="keng">{{timeobj.m_one}}</div>
                <div class="keng">{{timeobj.m_two}}</div>
            </div>
            <!-- 点 -->
            <div class="dots">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="content">
                <div class="keng">{{timeobj.s_one}}</div>
                <div class="keng">{{timeobj.s_two}}</div>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="actions">
            <el-button plain @click="start">开始</el-button>
            <el-button plain @click="pause">暂停</el-button>
            <el-button plain @click="reset">重置</el-button>
            <el-button plain @click="dialogFormVisible = true">配置</el-button>
        </div>
        <div class="logo">最高人民法院</div>
        <el-dialog title="参数配置" :visible.sync="dialogFormVisible">
            <div class="timeset">
                计时时长：
                <el-input v-model="timeobj.seth" placeholder="时"></el-input>&nbsp;:&nbsp;
                <el-input v-model="timeobj.setm" placeholder="分"></el-input>&nbsp;:&nbsp;
                <el-input v-model="timeobj.sets" placeholder="秒"></el-input>
            </div>
            <div class="timeset">
                提示时间：
                <el-input v-model="timeobj.hinth" placeholder="时"></el-input>&nbsp;:&nbsp;
                <el-input v-model="timeobj.hintm" placeholder="分"></el-input>&nbsp;:&nbsp;
                <el-input v-model="timeobj.hints" placeholder="秒"></el-input>
            </div>
            <div class="timeset">
                提示时间：
                <el-input v-model="timeobj.hinth_two" placeholder="时"></el-input>&nbsp;:&nbsp;
                <el-input v-model="timeobj.hintm_two" placeholder="分"></el-input>&nbsp;:&nbsp;
                <el-input v-model="timeobj.hints_two" placeholder="秒"></el-input>
            </div>
            <div class="timeset">
                告警时间：
                <el-input v-model="timeobj.alarmh" placeholder="时"></el-input>&nbsp;:&nbsp;
                <el-input v-model="timeobj.alarmm" placeholder="分"></el-input>&nbsp;:&nbsp;
                <el-input v-model="timeobj.alarms" placeholder="秒"></el-input>
            </div>
            <div class="timeset">
                <el-radio v-model="radio" label="1" @change="getOrder(radio)">正计时</el-radio>
                <el-radio v-model="radio" label="2" @change="getOrder(radio)">倒计时</el-radio>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button plain @click="dialogFormVisible=false">取 消</el-button>
                <el-button plain type="primary" @click="setTime">确 定</el-button>
            </div>
        </el-dialog>
       <!--  声音 -->
       <audio  controls class="soundContainer" ref="sound" src="">
		亲爱的用户,你的浏览器版本太低,无法享受这个页面的所有功能,建议进行更新 ^_^ <a href="#">戳我下载</a>
	    </audio>
    </div>
    <script src="js/vue.min.js "></script>
    <script src="js/index.js "></script>
    <script>
        new Vue({
            el: "#time ",
            data: {
                timer:{},
                overTimer:{},
                overTime:false,
                pauseFlag:false,
                title: '发言计时',
                radio:'2',
                isDanger:false,
                isAlarm:false,
                stopFlag:false,
                seconds:900,
                z_seconds:0,
                alarmTime:0,
                hintsTime:0,
                hintsTime_two:0,
                timeobj: {
                    h_one: 0,
                    h_two: 0,
                    m_one: 1,
                    m_two: 5,
                    s_one: 0,
                    s_two: 0,
                    seth:0,
                    setm:15,
                    sets:0,
                    hinth:0,
                    hintm:10,
                    hints:0,
                    hinth_two:0,
                    hintm_two:5,
                    hints_two:0,
                    alarmh:0,
                    alarmm:1,
                    alarms:0
                },
                dialogFormVisible: false
            },
            methods: {
                //根据秒计算小时分钟并分开展示
                compute:function(seconds,obj){
                    var s = parseInt(seconds%60);
                    var m = parseInt(seconds/60%60);
                    var h = parseInt(seconds/60/60);
                    obj.h_one = parseInt(h/10);
                    obj.h_two = parseInt(h%10);
                    obj.m_one = parseInt(m/10);
                    obj.m_two = parseInt(m%10);
                    obj.s_one = parseInt(s/10);
                    obj.s_two = parseInt(s%10);
                    return obj;
                },
                setTime: function () {
                    this.$refs.sound.removeAttribute('loop');
                    clearInterval(this.timer);
                    clearInterval(this.overTimer);
                    if(window.sessionStorage.getItem('second')){
                        window.sessionStorage.removeItem('second');
                    }
                    this.isDanger = false;
                    this.isAlarm = false;
                    this.overTime=false,
                    this.pauseFlag = false;
                    this.stopFlag = false;
                    this.title= '发言计时';
                    this.seconds = parseInt(this.timeobj.seth*3600)+parseInt(this.timeobj.setm*60)+parseInt(this.timeobj.sets);
                    this.alarmTime =  parseInt(this.timeobj.alarmh*3600)+parseInt(this.timeobj.alarmm*60)+parseInt(this.timeobj.alarms);
                    this.hintsTime = parseInt(this.timeobj.hinth*3600)+parseInt(this.timeobj.hintm*60)+parseInt(this.timeobj.hints);
                    this.hintsTime_two = parseInt(this.timeobj.hinth_two*3600)+parseInt(this.timeobj.hintm_two*60)+parseInt(this.timeobj.hints_two);
                    this.timeobj = this.compute(this.seconds,this.timeobj);
                    if(this.seconds == 0){
                        this.stopFlag = true;
                    }
                    window.sessionStorage.setItem('alltime',JSON.stringify({
                        _radio:this.radio,
                        _seconds:this.seconds,
                        _z_seconds:this.z_seconds,
                        _alarmTime:this.alarmTime,
                        _hintsTime:this.hintsTime,
                        _hintsTime_two:this.hintsTime_two,
                        _timeobj:this.timeobj
                    }));
                    console.log(window.sessionStorage.getItem('alltime'));
                    this.dialogFormVisible=false;
                },
                start: function () {
                    var that = this;
                    if( window.sessionStorage.getItem('second')&& that.pauseFlag){
                        that.seconds = parseInt(JSON.parse(window.sessionStorage.getItem('second')).d_count);
                        that.z_seconds = parseInt(JSON.parse(window.sessionStorage.getItem('second')).z_count);
                    }
                    that.pauseFlag = false;
                    if(!that.stopFlag){
                        that.timeobj = that.compute(that.seconds,that.timeobj);
                    }
                    if(that.radio == "2"){
                        that.timer = setInterval(function(){
                            if(that.overTime){
                                that.seconds++;
                            }else{
                                that.seconds--;
                            }
                            if(!that.stopFlag){
                                that.timeobj = that.compute(that.seconds,that.timeobj);
                            }
                            //提示声
                            if(that.hintsTime!=0 && that.seconds==that.hintsTime && !that.overTime){
                                that.$refs.sound.src = 'sounds/hinit.WAV';
                                that.$refs.sound.play();
                            }
                            //提示声2
                            if(that.hintsTime_two!=0 && that.seconds==that.hintsTime_two && !that.overTime){
                                that.$refs.sound.src = 'sounds/hinit.WAV';
                                that.$refs.sound.play();
                            }
                             //告警声音
                            if(that.alarmTime!=0 && that.seconds==that.alarmTime && !that.overTime){
                                that.isAlarm = true;
                                that.$refs.sound.src = 'sounds/end.WAV';
                                that.$refs.sound.play();
                            }
                             //超时
                            if(that.seconds==0){
                               that.overTime = true;
                               that.isDanger = true;
                               that.title = '发言已超时';
                               //that.$refs.sound.setAttribute('loop','loop');
                               that.$refs.sound.src = 'sounds/end.WAV';
                               that.$refs.sound.play();
                               that.overTimer = setInterval(function(){
                                    that.$refs.sound.play();
                               },60000)
                            }
                        },1000);
                    }
                    else{
                        that.timer = setInterval(function(){
                            that.z_seconds++;
                            if(!that.stopFlag){
                                that.timeobj = that.compute(that.z_seconds,that.timeobj);
                            } 
                              //提示声
                            if(that.hintsTime!=0 && that.seconds==that.hintsTime && !that.overTime){
                                that.$refs.sound.src = 'sounds/hinit.WAV';
                                that.$refs.sound.play();
                            }
                            //提示声2
                            if(that.hintsTime_two!=0 && that.seconds==that.hintsTime_two && !that.overTime){
                                that.$refs.sound.src = 'sounds/hinit.WAV';
                                that.$refs.sound.play();
                            }
                             //告警声音
                            if(that.alarmTime!=0 && that.seconds==that.alarmTime && !that.overTime){
                                that.isAlarm = true;
                                that.$refs.sound.src = 'sounds/end.WAV';
                                that.$refs.sound.play();
                            }
                            //超时
                            if(that.z_seconds==that.seconds){
                                that.overTime = true;
                                that.isDanger = true;
                                that.title = '发言已超时';
                                //that.$refs.sound.setAttribute('loop','loop');
                                that.$refs.sound.src = 'sounds/end.WAV';
                                that.$refs.sound.play();
                                that.overTimer = setInterval(function(){
                                    that.$refs.sound.play();
                               },60000)
                            }
                        },1000);
                    }
                },
                reset: function () {
                    if(window.sessionStorage.getItem('second')){
                        window.sessionStorage.removeItem('second');
                    }
                    this.$refs.sound.removeAttribute('loop');
                    clearInterval(this.timer);
                    clearInterval(this.overTimer);
                    this.timer={},
                    this.overTimer={},
                    this.overTime=false,
                    this.pauseFlag = false;
                    this.isDanger = false;
                    this.isAlarm = false;
                    this.stopFlag = false;
                    this.title= '发言计时';
                    if(window.sessionStorage.getItem('alltime')){
                        var obj = JSON.parse(window.sessionStorage.getItem('alltime'));
                        this.radio=obj._radio;
                        this.seconds=obj._seconds;
                        this.z_seconds=obj._z_seconds,
                        this.alarmTime=obj._alarmTime;
                        this.hintsTime=obj._hintsTime;
                        this.hintsTime_two=obj._hintsTime_two;
                        this.timeobj = obj._timeobj
                    }else{
                        this.radio='2';
                        this.seconds=900;
                        this.z_seconds=0;
                        this.alarmTime=60;
                        this.hintsTime=300;
                        this.hintsTime_two=600;
                        this.timeobj = {
                            h_one: 0,
                            h_two: 0,
                            m_one: 1,
                            m_two: 5,
                            s_one: 0,
                            s_two: 0,
                            seth:0,
                            setm:15,
                            sets:0,
                            hinth:0,
                            hintm:10,
                            hints:0,
                            hinth_two:0,
                            hintm_two:5,
                            hints_two:0,
                            alarmh:0,
                            alarmm:1,
                            alarms:0
                        }   
                    }
                    console.log(this);
                },
                pause: function () {
                    this.$refs.sound.removeAttribute('loop');
                    this.pauseFlag = true;
                    clearInterval(this.timer);
                    clearInterval(this.overTimer);
                    window.sessionStorage.setItem('second',JSON.stringify({
                        d_count:this.seconds,
                        z_count:this.z_seconds
                    }));
                },
                getOrder:function(val){
                    console.log(this.radio);
                }
            }
        })
    </script>
</body>

</html>